<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      margin: 40px auto 0; 
    }
    table{
      width: 300px;
      border: 1px solid #ccc;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid #999;
      padding: 10px;
      text-align: center;
    }
    th{
      background-color: blue;
      color:white;
    }
    tbody tr{
      background-color: #ddd;
    }
    tbody tr:hover{
      background-color: white;
    }
  </style>
</head>
<body>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>商品</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPhone8</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Pro</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>iPad Air</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>Apple Watch</td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="  反 选  " id="btn">
  </div>
  <script>
    var all_btn = document.querySelector('thead input:first-child');
    var alone_btns = document.querySelectorAll('tbody input');
    var btn = document.getElementById('btn')
    //全选
    all_btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type == 'checkbox'){
          alone_btns[i].checked = this.checked;
        }
      }
    }
    //单选
    for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type !== 'checkbox'){
          continue;
        }
        alone_btns[i].onclick = function(){
          checkAllCheckBox()
        }
    }
    function checkAllCheckBox(){
      var isAllChecked = true;
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type !== 'checkbox' ){
          continue;
        }
        if(!alone_btns[i].checked){
          isAllChecked = false;
        }
      }
      all_btn.checked = isAllChecked;
    }
    //反选
    btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type !== 'checkbox'){
          continue;
        }
        alone_btns[i].checked = !alone_btns[i].checked;
        checkAllCheckBox()
      }
    }
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      margin:  40px auto 0;
    }
    table{
      width: 100%;
      border: 1px solid #ccc;
      border-collapse: collapse;
    }
    th,td{
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
    th{
      background-color: blue;
      color:white;
    }
    tbody tr{
      background-color: #ddd;
    }
    tbody tr:hover{
      background-color: white;
    }
  </style>
</head>
<body>
  <div>
   <table>
     <thead>
      <tr>
        <th><input type="checkbox"></th>
        <th>商品</th>
      </tr>
     </thead>
     <tbody>
       <tr>
         <td><input type="checkbox"></td>
         <td>iPhone8</td>
       </tr>
       <tr>
         <td><input type="checkbox"></td>
         <td>iPad Pro</td>
       </tr>
       <tr>
         <td><input type="checkbox"></td>
         <td>iPad Air</td>
       </tr>
       <tr>
         <td><input type="checkbox"></td>
         <td>Apple Watch</td>
       </tr>
     </tbody>
   </table>
   <input type="button" value=" 反 选 " id="btn">
  </div>
  <!-- <script>
    var all_btn = document.querySelector('thead input:first-child');
    var alone_btns = document.querySelectorAll('tbody input');
    var btn = document.getElementById('btn');
    //全选
    all_btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type == "checkbox"){
          alone_btns[i].checked = this.checked;
        }
      }
    }
    //单选
    for(var i = 0; i < alone_btns.length; i++){
      if(alone_btns[i].type !== 'checkbox'){
        continue;
      }
      alone_btns[i].onclick = function(){
        checkAllCheckBox()
      }
    }
    function checkAllCheckBox(){
      var isAllChecked = true;
      for(var i = 0; i < alone_btns.length; i++){
        // if(alone_btns[i].type !== 'checkbox'){
        // continue;
        // }
        if(alone_btns[i].checked != true){
          isAllChecked = false;
          alone_btns[i].checked = isAllChecked;
        }
      }
      all_btn.checked = isAllChecked;
    }
    //全选
    btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        // if(alone_btns[i].type !== 'checkbox'){
        //   continue;
        // }
        alone_btns[i].checked = !alone_btns[i].checked;
        checkAllCheckBox();
      }
    }
  </script> -->
  <!-- <script>
    var all_btn =  document.querySelector('thead input:first-child');
    var alone_btns = document.querySelectorAll('tbody input');
    var btn = document.getElementById('btn');
    //全选
    all_btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        alone_btns[i].checked = this.checked;
      }
    }
    //单选
    for(var i = 0; i < alone_btns.length; i++){
      if(alone_btns[i].type !== 'checkbox'){
        continue;
      }
      alone_btns[i].onclick = function(){
        checkAllCheckBox();
      }
    }
    function checkAllCheckBox(){
      var flag = true;
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type !== 'checkbox'){
          continue;
        }
        if(!alone_btns[i].checked){
          flag = false;
          alone_btns[i].checked = false;
        }
      }
      all_btn.checked = flag;
    }
    //反选
    btn.onclick = function(){
      for(var i = 0; i < alone_btns.length; i++){
        if(alone_btns[i].type !== 'checkbox'){
          continue;
        }
        alone_btns[i].checked = !alone_btns[i].checked
      }
      checkAllCheckBox();
    }
  </script>
</body>
</html> -->
<!-- <script>
  var all_btn = document.querySelector('thead input');
  var alone_btns = document.querySelectorAll('tbody input');
  var btn = document.getElementById('btn')
  //全选 
  all_btn.onclick = function(){
    for(var i = 0; i < alone_btns.length; i++){
      alone_btns[i].checked = this.checked;
    }
  }
  //单选
  for(var i = 0; i <alone_btns.length; i++){
    alone_btns[i].onclick = function(){
      checkAllCheckBox();
    }
  }
  function checkAllCheckBox(){
    var flag = true;
    for(var i = 0; i <alone_btns.length; i++){
      if(!alone_btns[i].checked){
        flag = false;
        alone_btns[i].checked = flag;
      }
      all_btn.checked = flag; 
    }
  }
  //反选
  btn.onclick = function(){
    for(var i = 0; i < alone_btns.length; i++){
      alone_btns[i].checked = !alone_btns[i].checked;
    }
    checkAllCheckBox()
  }
</script> -->
<script>
  var all_btn = document.querySelector('thead input');
  var alone_btns = document.querySelectorAll('tbody input');
  var btn = document.getElementById('btn');
  //全选
  all_btn.onclick = function(){
    for(var i = 0; i < alone_btns.length; i++){
      alone_btns[i].checked = this.checked;
    }
  }
  //单选
  for(var i = 0; i < alone_btns.length; i++){
    alone_btns[i].onclick = function(){
      checkAllCheckBox()
    }
  }
  function checkAllCheckBox(){
    var flag = true;
      for(var j = 0; j < alone_btns.length; j++){
        if(!alone_btns[j].checked){
          flag = false;
          alone_btns[j].checked = flag
        }
      }
      all_btn.checked = flag;
  }
  //反选
  btn.onclick = function(){
    for(var i = 0; i < alone_btns.length; i++){
      alone_btns[i].checked = !alone_btns[i].checked;
    }
    checkAllCheckBox()
  }
</script>